<template>
    <div class="count-goods">
        <!-- 时间范围 -->
         <div class="block">
            <span class="demonstration">时间范围</span>
            <el-date-picker
                v-model="value"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd hh:mm:ss"
                align="left">
            </el-date-picker>
            <el-button type="primary" @click="submit">查询</el-button>
        </div>

        <!-- 图表 -->
        <div id="box" ref="box">

        </div>
    </div>
</template>

<script>
// 引入ECharts图标库
import * as echarts from 'echarts';
// 引入报表统计模块
import {totalData} from "@/api/report.js";

export default {
    data() {
      return {
        value: '' , //默认时间
      };
    },

    methods:{
        submit() {
            const [startTime, endTime] = this.value;
            console.log('开始时间:', startTime);
            console.log('结束时间:', endTime);
        }
    },

    // 注意：代码必须写在mounted里面，才能获取到页面容器
    async mounted(varArr){
        // 发请求获取数据
        let res = await totalData({data: '["2019-10-01 00:00:00", "2019-10-10 00:00:00"]'});
        
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.$refs.box);
        // 绘制图表
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
                }
            },
            toolbox: {
                feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
                },
                top:10
            },
            legend: {
                data: ['订单金额', '订单数量'],
                top:10,
            },
            grid:{
                top:100,
            },
            xAxis: [
                {
                type: 'category',
                data: res.data.xData,
                axisPointer: {
                    type: 'shadow'
                }
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: '订单金额',
                interval: 50,
                axisLabel: {
                    formatter: '{value} 元'
                }
                },
                {
                type: 'value',
                name: '订单数量',
                interval: 50,
                axisLabel: {
                    formatter: '{value} 单'
                }
                }
            ],
            series: [
                {
                name: '订单金额',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                    return value + " 元";
                    }
                },
                data: res.data.amountData
                },
                {
                name: '订单数量',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + " 单";
                    }
                },
                data: res.data.orderData
                }
            ]
        });

        // 重置图标大小
        window.onresize = function(){
            myChart.resize();
        }
    },

    destroyed(){
        window.onresize = null;  //组件销毁时自动去除window事件
    }
}
</script>

<style lang="less" scoped>
// 时间范围
.block{
    margin-bottom: 20px;

    &>span{
        margin-right: 20px;
    }
}

// 图表
#box{
    height: 470px;
    background-color: #fff;
}
.el-button{
    margin-left: 20px;
}
</style>